<template>
	<view class="container">
		<view class="video-item" @click="$emit('click', item)">
			<image class="video-poster" :src="item.videoPoster+'?x-oss-process=style/wh100'" mode="aspectFill"></image>
			<view class="video-info">
				<view class="video-title">
					<view class="text-bold">{{item.videoName}}</view>
					<view class="text-sm text-gray text-cut">完成时间：{{item.createTime}}</view>
				</view>
				<view class="foot-info">
					<view>
						<text v-if="item.videoDuration" class="text-grey text-sm">时长:{{Math.round(item.videoDuration / 60)}}分{{item.videoDuration % 60}}秒</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		mounted() {
			//
		},
		data() {
			return {};
		},
		methods: {
			//
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10upx 25upx;
		.video-item {
			border-radius: 10upx;
			background-color: white;
			display: flex;

			.video-poster {
				margin: 12upx;
				width: 200upx;
				height: 150upx;
			}

			.video-info {
				margin: 12upx 12upx 12upx 0;
				flex: 1;
				display: flex;
				flex-direction: column;

				.video-title {
					flex: 1;
				}
			}

			.foot-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
</style>
